<script lang="ts">
export default {
  name: 'manage',
};
</script>

<script lang="ts" setup>

import {onMounted, reactive, ref} from 'vue';

import RepoCompEntityTable from './components/RepoCompEntityTable.vue';
import RepoCompFormHeader from './components/RepoCompFormHeader.vue';

import {RepoCompQueryParam} from "@/api/repo/comp/cloud/model/types";
import {ElMessage, ElMessageBox} from "element-plus";
import {installRepoCompObjectEntity} from "@/api/repo/comp/cloud/model/version";

const repoCompEntityTableRef = ref<any>(); // 这了的变量名称必须和<deviceDecoder-edit-dialog>的ref值一样
const repoCompFormHeaderRef = ref<any>(); // 这了的变量名称必须和<deviceDecoder-edit-dialog>的ref值一样

const state = reactive({
  // 查询参数
  queryParams: {pageNum: 1, pageSize: 10} as RepoCompQueryParam,
});

function handleInstall(source: string, type: string, row: any) {
  ElMessageBox.confirm('确认安装已选中的数据项的安裝包?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {

    installRepoCompObjectEntity(row.id, row.lastVersion.id).then(() => {
      ElMessage.success('安装任务成功');
      // 刷新表单
      repoCompEntityTableRef.value.refreshTable(state.queryParams);
    });
  })
    .catch(() => ElMessage.info('已取消下载'));
}


/**
 * 响应查询按钮：页查询数据
 */
function handleQuery(source: string, value: any) {
  state.queryParams = value;
  repoCompEntityTableRef.value.refreshTable(state.queryParams);
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
});
</script>

<template>
  <div class="app-container">

    <!-- 表单头：各种按钮 -->
    <repo-comp-form-header ref="repoCompFormHeaderRef"
                           @query="handleQuery"
    />

    <!-- 数据表单：创建/修改 -->
    <repo-comp-entity-table ref="repoCompEntityTableRef"
                            @install="handleInstall"
    />

  </div>
</template>
